<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>位点库</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <!-- Morris -->
    <link href="css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">
    <!-- Gritter -->
    <link href="js/plugins/gritter/jquery.gritter.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <link href="css/global.css" rel="stylesheet">
    <link href="css/librarySite.css" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox float-e-margins">
        <div class="ibox-content librarySiteContent">
            <img src="img/librarySiteIcon.png" class="librarySiteIcon" alt="">
            <div class="librarySiteSelectBox">
                <!--<div class="floatClear">-->
                    <!--<div class="floatLeft tabItemBtn on">基因名</div>-->
                    <!--<div class="floatLeft tabItemBtn">位点名</div>-->
                <!--</div>-->
                <div class="librarySiteInputBox floatClear">
                    <input type="text" class="librarySiteInput floatLeft" placeholder="输入基因名或位点名">
                    <a class="J_menuItem librarySiteBtnA" href="librarySiteList.html" data-name="位点库">
                        <div class="floatRight librarySiteBtn">搜  索</div>
                    </a>
                    <div class="input-group-btn floatRight">
                        <button tabindex="-1" class="btn btn-white siteBtn" type="button" data-url="librarySiteList.html"
                                style="height: 100%;margin: 0;width: 1.5rem;">基因名</button>
                        <button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button"
                                style="height:100%;margin: 0;width: .5rem;">
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu siteUl">
                            <li>
                                <a href="javascript:void(0)" data-url="librarySiteList.html">位点库</a>
                            </li>
                            <li>
                                <a href="javascript:void(0)" data-url="librarySampleList.html">样本位点库</a>
                            </li>
                            <li>
                                <a href="javascript:void(0)" data-url="libraryInheritanceList.html">遗传模式库</a>
                            </li>
                            <li>
                                <a href="javascript:void(0)" data-url="libraryDeleteList.html">待删除库</a>
                            </li>
                            <li>
                                <a href="javascript:void(0)" data-url="libraryBlackBoxList.html">黑盒库</a>
                            </li>
                            <li>
                                <a href="javascript:void(0)" data-url="libraryDiseaseList.html">疾病库</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<!-- layerDate plugin javascript -->
<script src="js/plugins/layer/laydate/laydate.js"></script>
<!--自定义js-->
<script src="js/global.js"></script>
<script>
    $(document).ready(function () {
        $(".siteUl a").click(function(){
            var text = $(this).text();
            var url = $(this).attr("data-url");
            $(".siteBtn").html(text).attr("data-url",url);
            $(".librarySiteBtnA").attr("href",url).attr("data-name",text)
        });
        $(".tabItemBtn").click(function () {
            $(".tabItemBtn").removeClass("on");
            $(this).addClass('on');
            $(".siteBtn").text($(this).text())
        })
    });

    //滚动到指定选项卡
    function scrollToTab(element) {
        var marginLeftVal = calSumWidth($(element).prevAll()), marginRightVal = calSumWidth($(element).nextAll());
        // 可视区域非tab宽度
        var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".J_menuTabs"));
        //可视区域tab宽度
        var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
        //实际滚动宽度
        var scrollVal = 0;
        if ($(".page-tabs-content").outerWidth() < visibleWidth) {
            scrollVal = 0;
        } else if (marginRightVal <= (visibleWidth - $(element).outerWidth(true) - $(element).next().outerWidth(true))) {
            if ((visibleWidth - $(element).next().outerWidth(true)) > marginRightVal) {
                scrollVal = marginLeftVal;
                var tabElement = element;
                while ((scrollVal - $(tabElement).outerWidth()) > ($(".page-tabs-content").outerWidth() - visibleWidth)) {
                    scrollVal -= $(tabElement).prev().outerWidth();
                    tabElement = $(tabElement).prev();
                }
            }
        } else if (marginLeftVal > (visibleWidth - $(element).outerWidth(true) - $(element).prev().outerWidth(true))) {
            scrollVal = marginLeftVal - $(element).prev().outerWidth(true);
        }
        $('.page-tabs-content').animate({
            marginLeft: 0 - scrollVal + 'px'
        }, "fast");
    }
    //通过遍历给菜单项加上data-index属性
    $(".J_menuItem").each(function (index) {
        if (!$(this).attr('data-index')) {
            $(this).attr('data-index', index);
        }
    });
    //计算元素集合的总宽度
    function calSumWidth(elements) {
        var width = 0;
        $(elements).each(function () {
            width += $(this).outerWidth(true);
        });
        return width;
    }
    function menuItem() {
        // 获取标识数据
        var dataUrl = $(this).attr('href'),
            dataIndex = $(this).data('index'),
            menuName = $.trim($(this).attr("data-name")),
            flag = true;
        if (dataUrl == undefined || $.trim(dataUrl).length == 0)return false;

        // 选项卡菜单已存在
        $('.J_menuTab',window.parent.document).each(function () {
            if ($(this).data('id') == dataUrl) {
                if (!$(this).hasClass('active')) {
                    $(this).addClass('active').siblings('.J_menuTab').removeClass('active');
                    scrollToTab(this);
                    // 显示tab对应的内容区
                    $('.J_mainContent .J_iframe',window.parent.document).each(function () {
                        if ($(this).data('id') == dataUrl) {
                            $(this).show().siblings('.J_iframe').hide();
                            return false;
                        }
                    });
                }
                flag = false;
                return false;
            }
        });
        // 选项卡菜单不存在
        if (flag) {
            var str = '<a href="javascript:;" class="active J_menuTab" data-id="' + dataUrl + '">' + menuName + ' <i class="fa fa-times-circle"></i></a>';
            $('.J_menuTab',window.parent.document).removeClass('active');
            // 添加选项卡对应的iframe
            var str1 = '<iframe class="J_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
            $('.J_mainContent',window.parent.document).find('iframe.J_iframe').hide().parents('.J_mainContent').append(str1);
            // 添加选项卡
            $('.J_menuTabs .page-tabs-content',window.parent.document).append(str);
            scrollToTab($('.J_menuTab.active',window.parent.document));
        }
        return false;
    }
    $('.J_menuItem').on('click', menuItem);
</script>
</body>
</html>